<template>
  <div>
    <div
      :style="{
        position: 'float',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'left'
      }"
    >
      您发布的{{ name }}配件信息，在平台上帮您找到{{ number }}个经销商的出售信息
    </div>
    <div>
      <FilterTable
        ref="promptInfoTable"
        columnsRef="partExchangePlatformTabsPromptInfoPurchase"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :isSelectColumn="false"
        :datakey="'records'"
        :onColumnsChange="columns => (this.columns = columns)"
        :dataSource="tableDataSource"
        :onSyncTableData="getTableData"
      />
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <AjaxButton size="small" :click="continueDialog" type="primary">继续发布</AjaxButton>
    </div>
    <div>
      <BaseDialog :visible.sync="visible" :title="dialogTitle" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
        <PartsSale :partsInfos="partsInfos" :saveData="saveData" @close="closeHandler" />
      </BaseDialog>
    </div>
  </div>
</template>

<script>
import { saveInfo, getInfo } from '@/api/part/exchange/platform';
import PartsSale from './partBuy';
import { dictionary } from '@/utils/dictMixin';
import { type } from 'os';
export default {
  name: 'PromptInfoPurchase',
  components: { PartsSale },
  mixins: [dictionary],
  props: {
    infoType: {
      type: String,
      default: ''
    },
    partsName: {
      type: String,
      default: ''
    },
    promptArray: {
      type: Array,
      default: []
    },
    saveInfo: {
      type: Object
    },
    partNo: {
      type: String
    }
  },
  data() {
    this.pruchaseInfos = { price: '销售', number: '剩余', details: '购买', name: '出售' };
    this.conf = { 出售: '1', 购买: '2' };
    this.saveData = {};
    this.type = 2;
    return {
      name: '',
      number: 0,
      prompType: this.promptArray[2],
      columns: this.createColumns(),
      handleType: '2',
      // 条件查询接口
      fetchApi: getInfo,
      saleType: 97011001,
      // 开启ajax请求
      fetchParams: { xhrAbort: true },
      visible: false,
      dialogTitle: '',
      typeHandle: this.promptArray[0],
      partsInfos: this.pruchaseInfos,
      tableDataSource: []
    };
  },
  watch: {
    name: {
      handler: function(val, oldval) {
        console.log(val, oldval);
      }
    }
  },
  created() {
    this.initialVal();
  },
  methods: {
    // 同步 table 组件列表数据
    async getTableData(val) {
      this.tableData = val;
      this.number = this.tableData.length;
    },
    // 获取信息列表
    // 初始化
    initialVal() {
      this.name = this.saveInfo.partName;
      this.initialParams();
      this.fetchParams = { xhrAbort: false, partNo: this.partNo, saleType: this.saleType };
    },
    initialParams() {},
    // 关闭出售订单
    closeHandler() {
      this.visible = false;
    },
    // 继续发布事件
    async continueDialog(val) {
      if (this.promptArray[0] === '出售') {
        this.handleType = '1';
      }
      let res = await saveInfo(this.saveInfo);
      // console.log('res', res, typeof res);
      if (res.resultCode === 200) {
        console.log('res', res.resultCode, res.success, res.data);
        if (!res.success) {
          // this.closeDialog("refresh");
          this.closeDialog('close');
          return this.$notify({
            title: '提示信息',
            message: res.data.message,
            type: 'error'
          });
        }
        // console.log('resresultCode', res.resultCode);
        this.closeDialog('refresh');
        return this.$notify({
          title: '提示信息',
          message: '发布成功',
          type: 'success'
        });
      }
    },
    // 出售处理
    saleHandle(val) {
      // console.log(val);

      this.visible = true;
      this.dialogTitle = '奥迪EP平台----配件求购';

      if (this.infoType === '求购') {
        this.pruchaseInfos.price = '购买';
        this.pruchaseInfos.number = '求购';
        this.pruchaseInfos.details = '出售';
        this.pruchaseInfos.name = '求购';
      } else {
        this.pruchaseInfos.price = '销售';
        this.pruchaseInfos.number = '剩余';
        this.pruchaseInfos.details = '购买';
        this.pruchaseInfos.name = '出售';
      }
      this.saveData = val;
    },
    // 关闭按钮
    closeDialog(val) {
      this.$emit('close', false, val);
    },
    // 创建提示信息
    createColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '经销商名称',
          dataIndex: 'dearlerName',
          sorter: true,
          filter: true
        },
        {
          title: '省份',
          dataIndex: 'provinceId',
          sorter: true,
          filter: true
        },
        {
          title: '城市',
          dataIndex: 'cityId',
          sorter: true,
          filter: true
        },
        {
          title: '地址',
          dataIndex: 'address',
          sorter: true,
          filter: true
        },
        {
          title: '出售数量',
          dataIndex: 'quantity',
          sorter: true,
          filter: true
        },
        {
          title: '含税出售单价',
          dataIndex: 'inOutTaxedPrice',
          sorter: true,
          filter: true
        },

        {
          title: '操作',
          dataIndex: 'column-action',
          // fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.saleHandle(props.row)}>
                  求购
                </el-button>
              </div>
            );
          }
        }
      ];
    }
  }
};
</script>

<style></style>
